<template>
  <div class="flex text-white items-center">
    <span class="text-lg ml-4">{{ state.time }}</span>
    <span class="flex flex-col items-end text-xs ml-4">
      <div>{{ state.week }}</div>
      <div>{{ state.date }}</div>
    </span>
    <span class="ml-4" @click="test2">
      <img :src="state.weather" class="w-5 h-auto" />
    </span>
    <span ref="clickHandle" class="ml-4" @click="reload">
      <ViewListIcon class="w-5 h-5" />
    </span>
    <span class="ml-4" @click="test1">
      <CogIcon class="w-5 h-5" />
    </span>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, inject } from 'vue'
import { CogIcon, ViewListIcon } from '@heroicons/vue/solid'
import WeatherCloudImage from '../../assets/weather_cloud.png'
import { nowTime, now, nowWeek } from '../../util/time'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {
    CogIcon,
    ViewListIcon,
  },
  setup() {
    const router = useRouter()
    const key = inject('key') as any
    const state = reactive({
      time: '',
      date: now(),
      week: nowWeek(),
      weather: WeatherCloudImage,
    })

    onMounted(() => {
      // reload();
      setInterval(() => {
        state.time = nowTime()
      }, 1000)
    })

    const reload = () => {
      router.go(0)
      console.log('key....', key)
      if (key.value == 0) {
        key.value++
      }
    }

    const test1 = () => {
      ;(window as any).ue('testue1', { data: 'hello ue' })
    }

    const test2 = () => {
      ;(window as any).ue4('testue4', { data: 'hello ue4' })
    }

    return {
      state,
      reload,
      test1,
      test2,
    }
  },
})
</script>
